import React, { Component } from 'react'
import './index.css';
export default class Footer extends Component {
    render() {
        //接收所有的任务
        let {todos} = this.props;
        //调用 every 方法, 是数组中一个方法
        // let result = todos.every(item => {
        //     if(item.done){
        //         return true;
        //     }else{
        //         return false;
        //     }
        // });

        let result = todos.every(item => item.done);

        return (
            <div className="todo-footer">
                <label>
                    <input 
                        type="checkbox" 
                        onChange={this.checkAllTodo} 
                        checked={result}
                    />
                </label>
                <span>
                    <span>已完成 {todos.filter(item => item.done).length} </span> / 全部 {todos.length}
                </span>
                <button className="btn btn-danger" onClick={this.clearDone}>清除已完成任务</button>
            </div>
        )
    }

    checkAllTodo = (e) => {
        // console.log(e.target.checked);
        //调用父级组件传入的方法
        this.props.checkAllTodo(e.target.checked);
    }

    //清空已经完成的任务
    clearDone = () => {
        this.props.clearDone();
    }
}
